<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>待办事项</span>
      </div>
    </template>
    <div class="box" v-loading="loading" element-loading-text="Loading...">
      <el-scrollbar style="height: 235px;">
        <el-space direction="vertical" alignment="flex-start" :size="10">
          <div class="item" v-for="item in list">
            <el-tag :type="item.tagType" effect="dark" round>
              {{ item.taskTypeName }}
            </el-tag>
            <span>{{ item.taskMsg }}</span>
          </div>
        </el-space>
      </el-scrollbar>
    </div>
  </el-card>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { getWorkByStatus } from '@/api/taskmanage/work'
import { taskTypeData } from '../enum'
export default defineComponent({
  setup() {
    let loading = ref(false)
    let list = ref([])
    const getList = () => {
      loading.value = true
      getWorkByStatus()
        .then(res => {
          loading.value = false
          var data = res.data.find(x => x.status === 1).children
          if (Array.isArray(data)) {
            data.forEach(d => {
              const taskType = taskTypeData.find(r => r.value === d.taskType)
              taskType ? d.taskTypeName = taskType.label : d.taskType
              taskType ? d.tagType = taskType.type : ''
            })
          }
          list.value = data
        })
    }
    getList()
    return {
      loading,
      list,
      getList,
    }
  }
})
</script>

<style lang="scss" scoped>
.box-card {
  margin: 2px;
  margin-top: 15px;

  .card-header {
    text-align: left;
  }

  .box {
    display: flex;

    .item {
      display: flex;
      align-items: center;

      * {
        margin-right: 20px;
      }
    }
  }
}
</style>